<template>
  <div class="page">
    <avue-crud
      :data="data"
      :option="option"
      @refresh-change="refreshChange"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @search-change="searchChange"
    >
      <template slot="expand" slot-scope="{ row }">
        <el-descriptions :column="4" border>
          <template v-for="(goodItem, index) in row.goods">
            <el-descriptions-item :key="index" label="商品名称">{{
              goodItem.name
            }}</el-descriptions-item>
            <el-descriptions-item :key="index" label="单价">{{
              goodItem.price
            }}</el-descriptions-item>
            <el-descriptions-item :key="index" label="数量">{{
              goodItem.number
            }}</el-descriptions-item>
            <el-descriptions-item :key="index" label="总价">{{
              goodItem.amount
            }}</el-descriptions-item>
          </template>
        </el-descriptions>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      data: [],
      option: {
        expand: true,
        rowKey: `id`,
        column: [
          {
            label: `下单电话`,
            prop: `mobile`,
            search: true,
          },
          {
            label: `实付金额`,
            prop: `amount`,
            type: `number`,
          },
          {
            label: `取餐方式`,
            prop: `typeCate`,
            type: `radio`,
            dicData: [
              {
                label: `堂食`,
                value: 1,
              },
              {
                label: `外卖`,
                value: 2,
              },
            ],
          },
          {
            label: `取单号`,
            prop: `sort_num`,
          },
          {
            label: `订单号`,
            prop: `order_no`,
          },
          {
            label: `订单状态`,
            prop: `status`,
            type: `radio`,
            dicData: [
              {
                label: `已下单`,
                value: 1,
              },
              {
                label: `制作中`,
                value: 2,
              },
              {
                label: `配送中`,
                value: 3,
              },
              {
                label: `已完成`,
                value: 4,
              },
            ],
          },
          {
            label: `备注`,
            prop: `remark`,
            type: `textarea`,
            hide: true,
          },
          {
            label: `商店`,
            prop: `storeId`,
            type: `select`,
            props: {
              label: `name`,
              value: `id`,
            },
            dicUrl: `${config.baseApi}/store`,
          },
        ],
      },
    }
  },
  async created() {
    this.refreshChange()
  },
  methods: {
    async refreshChange() {
      this.data = await this.$http.instance.get(`/customer_orders`)
    },
    async searchChange(params, done) {
      this.data = await this.$http.instance.get(
        `/customer_orders?q=${params.mobile}`
      )
      setTimeout(() => {
        done()
      }, 500)
    },
    async rowSave(form, done, loading) {
      await this.$http.instance.post(`/customer_orders`, form)
      done(form)
    },
    async rowDel(form, index, done) {
      await this.$http.instance.delete(`/customer_orders/${form.id}`)
      done(form)
    },
    async rowUpdate(form, index, done, loading) {
      await this.$http.instance.patch(`/customer_orders/${form.id}`, form)
      done(form)
    },
  },
}
</script>
